import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon } from 'bee/components/Icon';

// @flow
type Props = {
  onPress: func,
  itemName: string,
  iconName: string,
  iconColor: string,
};

class MyItem extends Component<Props> {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress} style={styles.container}>
        <View style={{ alignItems: 'center' }}>
          {/* <Text style={styles.icon} /> */}
          {/* <View style={{ backgroundColor: 'blue' }}> */}
          <Icon
            name={this.props.iconName}
            color={this.props.iconColor}
            size={px2dp(60)}
          />
          {/* </View> */}
          <Text style={styles.name}>{this.props.itemName}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    width: '50%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  icon: {
    width: px2dp(65),
    height: px2dp(50),
    backgroundColor: colors['1002'],
  },
  name: {
    fontSize: sizes.f2,
    color: colors['1101'],
    // paddingTop: px2dp(20),
  },
});

export default MyItem;
